<template>
  <div id="topBarRoot" class="animate__animated animate__fadeInDown">
    <div id="time">
      {{ time }} | 
    </div>
    <div id="userName">
      权限等级：
      <el-tag v-if="admin == 'true'">系统管理员</el-tag>
      <el-tag type="info" v-if="admin != 'true'">普通用户</el-tag>
    </div>
    <el-popconfirm title="您确定要退出登录吗?" @confirm="logout" width="200">
      <template #reference>
        <el-button type="danger">安全登出</el-button>
      </template>
    </el-popconfirm>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: localStorage.getItem("userName"),
      time: new Date().toLocaleString(),
      admin: localStorage.getItem("admin"),
    };
  },
  methods: {
    logout() {
      localStorage.clear();
      this.$router.push("/login");
    },
    getCurrentTime() {
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth()+1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    this.time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    }
  },
  mounted() {
    this.getCurrentTime();
    setInterval(() => {
      this.getCurrentTime(); //每秒更新一次时间
    }, 1000);
  },
};
</script>

<style scoped>
#topBarRoot {
  position: fixed;
  width: auto;
  height: 50px;
  line-height: 50px;
  top: 10px;
  right: 10px;
  background-color: #ffffffd3;
  border-radius: 8px;
  box-shadow: 1px 1px 5px rgb(88, 88, 88, 0.4);
  padding-left: 15px;
  padding-right: 15px;
  z-index: 200000;
}

#topBarRoot > div {
  display: inline-block;
  margin-right: 10px;
}

.el-icon {
  font-size: 17px;
  margin-top: 10px;
  color: #406683;
}

.el-button {
  margin-top: -5px;
  height: 25px;
}

.el-tag {
  margin-top: -4px;
}
</style>